<template>
  <div class="contentTop">
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="commonHeightTop contentBg">
          <div>
            <p class="fontColor comFontSize TitleStyle">项目统计</p>
          </div>
          <div style="height: 100%; position: relative">
            <el-row class="contentBoxTop">
              <el-col :span="8" class="projectDataTitBox">
                <p>
                  <span class="markStyle markBg"></span
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >项目总数</span
                  >
                </p>
                <p>
                  <span class="markStyle markBgO"></span
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >在建项目</span
                  >
                </p>
                <p v-if="!investmentType">
                  <span class="markStyle markBgT"></span
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >政府投资</span
                  >
                </p>
                <p v-else>
                  <span class="markStyle markBgT"></span
                  ><span class="markTitle comSinFontSize sinFontColor"
                    >已开专户项目数</span
                  >
                </p>
              </el-col>
              <el-col :span="8" class="projectFigure">
                <div id="projectStatistic" class="statistic staSty"></div>
              </el-col>
              <el-col :span="8" class="projectDataBox"
                ><div class="grid-content bg-purple"></div>
                <p class="numColor comFontSize">
                  {{ porjectStatisticData.allCount }}
                </p>
                <p class="numColor comFontSize">
                  {{ porjectStatisticData.startCount }}
                </p>
                <p class="numColor comFontSize">
                  {{ porjectStatisticData.count }}
                </p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="commonHeightTop contentBg">
          <div>
            <p class="fontColor comFontSize TitleStyle">
              实名制
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
          </div>
          <div style="height: 100%; position: relative">
            <el-row class="contentBoxTop">
              <el-col :span="13">
                <div class="RealNameBox">
                  <div class="comSinFontSize fontColor">实名制人数</div>
                  <div class="numColor maxNum">
                    {{ realNameStatisticData.empCount }}
                  </div>
                </div>
                <div class="realNameProportion">
                  <span class="markStyle markBgO"></span
                  ><span class="sinFontColor comSinFontSize mLTen"
                    >实名制考勤比例</span
                  ><span class="numColor comFontSize mLTen"
                    >{{ realNameStatisticData.attScale }}%</span
                  >
                </div>
                <div class="realNameProportion">
                  <span class="markStyle markBg"></span
                  ><span class="sinFontColor comSinFontSize mLTen"
                    >实名制合同比例</span
                  ><span class="numColor comFontSize mLTen"
                    >{{ realNameStatisticData.contractScale }}%</span
                  >
                </div>
              </el-col>
              <el-col :span="9" class="projectFigure">
                <div
                  id="realName"
                  class="statistic"
                  style="position: relative"
                ></div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="commonHeightTop contentBg">
          <div>
            <p class="fontColor comFontSize TitleStyle">
              分账拨付
              <span class="titleTip comSinFontSize">（仅统计已开工项目）</span>
            </p>
          </div>
          <div style="height: 100%; position: relative">
            <el-row class="contentBoxTop">
              <el-col :span="13">
                <div class="RealNameBox">
                  <div class="comSinFontSize fontColor">专户数</div>
                  <div class="numColor maxNum">
                    {{ accountStatisticData.accountCount }}
                  </div>
                </div>
                <div class="realNameProportion">
                  <span class="markStyle markBgO"></span
                  ><span class="sinFontColor comSinFontSize mLTen"
                    >专户开设比例</span
                  ><span class="numColor comFontSize mLTen"
                    >{{ accountStatisticData.accountOpenedPercent }}%</span
                  >
                </div>
                <div class="realNameProportion">
                  <span class="markStyle markBg"></span
                  ><span class="sinFontColor comSinFontSize mLTen"
                    >足额拨付比例</span
                  ><span class="numColor comFontSize mLTen"
                    >{{ accountStatisticData.accountFullPaidPercent }}%</span
                  >
                </div>
              </el-col>
              <el-col :span="9" class="projectFigure">
                <div
                  id="accountFigure"
                  class="statistic"
                  style="position: relative"
                ></div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'overViewTop',
  data() {
    return {
      porjectStatisticData: {}, //项目统计
      realNameStatisticData: {}, //实名制
      accountStatisticData: {}, //分账拨付
      echartsSize: '1',
      myChart: '',
      chartAccount: '',
      chartRealName: '',
    }
  },
  props: {
    area: {
      type: String,
      default: false,
    },
    investmentType: {
      type: String,
      default: false,
    },
  },
  activated() {
    // 解决其他页面浏览器放大缩小，切换到本页面echarts不显示的问题
    if (this.myChart || this.chartAccount || this.chartRealName) {
      setTimeout(() => {
        this.myChart.resize()
        this.chartAccount.resize()
        this.chartRealName.resize()
      }, 100)
    }
  },
  created() {
    this.getStaticData()
    this.getRealName()
    this.getAccountData()
    // 获取项目统计数据
    // this.getProStatisticalData()
  },
  mounted() {
    // const windowWidth = window.screen.width;
    const windowHeight = window.screen.height
    if (windowHeight > 768 && windowHeight <= 900) {
      this.echartsSize = '2'
    }
    if (windowHeight <= 800) {
      this.echartsSize = '3'
    }
  },
  watch: {
    area(newValue, oldValue) {
      this.area = newValue
      this.getStaticData()
      this.getRealName()
      this.getAccountData()
    },
    investmentType(newValue, oldValue) {
      this.investmentType = newValue
      this.getStaticData()
      this.getRealName()
      this.getAccountData()
    },
  },
  methods: {
    // 获取项目统计数据
    getStaticData() {
      this.axios({
        method: 'post',
        url: '/api-p/projectstats/expand/projectstatscount',
        data: {
          areaId: this.area,
          investment: this.investmentType,
        },
      })
        .then((resp) => {
          this.porjectStatisticData = resp.data.result
          this.getPorjectStatistic()
        })
        .catch((resp) => {
          console.log('请求失败')
        })
    },
    // 获取实名制数据
    getRealName() {
      this.axios({
        method: 'post',
        url: '/api-s/cs/employeestats/base/empstats',
        data: {
          areaId: this.area,
          investment: this.investmentType,
        },
      })
        .then((resp) => {
          this.realNameStatisticData = resp.data.result
          this.getRealNameOrAccount('realName')
        })
        .catch((resp) => {
          console.log('请求失败')
        })
    },
    // 获取分账拨付数据
    getAccountData() {
      this.axios({
        method: 'post',
        url: '/api-p/projectstats/expand/projectaccountcount',
        data: {
          areaId: this.area,
          investment: this.investmentType,
        },
      })
        .then((resp) => {
          this.accountStatisticData = resp.data.result
          this.getRealNameOrAccount('accountFigure')
        })
        .catch((resp) => {
          console.log('请求失败')
        })
    },
    getPorjectStatistic() {
      this.$nextTick(() => {
        this.myChart = this.$echarts.init(
          document.getElementById('projectStatistic')
        )
        var funSize
        if (this.echartsSize == '2') {
          funSize = '70'
        } else if (this.echartsSize == '3') {
          funSize = '40'
        } else {
          funSize = '90'
        }
        var option = {
          color: ['#3F7EEF', '#26BBFF', '#52FFAC'],
          series: [
            {
              name: '漏斗图',
              type: 'funnel',
              left: '10%',
              top: 50,
              //x2: 80,
              width: '80%',
              height: funSize,
              minSize: '0',
              maxSize: '100%',
              sort: 'descending',
              gap: 2,
              label: {
                show: true,
                position: 'inside',
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid',
                },
              },
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1,
              },
              emphasis: {
                label: {
                  fontSize: 20,
                },
              },
              data: [20, 40, 60],
            },
          ],
        }
        this.myChart.setOption(option)
        window.addEventListener('resize', () => {
          this.myChart.resize()
        })
      })
    },
    getRealNameOrAccount(id) {
      this.$nextTick(() => {
        var temp, tempData, tipName

        if (id == 'realName') {
          tipName = '实名制'
          this.chartRealName = this.$echarts.init(
            document.getElementById('realName')
          )
          ;(temp = [
            {
              value: this.realNameStatisticData.attScale,
              name: '实名制考勤比例',
            },
            {
              value: 100 - this.realNameStatisticData.attScale,
              name: '',
            },
          ]),
            (tempData = [
              {
                value: this.realNameStatisticData.contractScale,
                name: '实名制合同比例',
              },
              {
                value: 100 - this.realNameStatisticData.contractScale,
                name: '',
              },
            ])
        } else if (id == 'accountFigure') {
          tipName = '分账拨付'
          this.chartAccount = this.$echarts.init(
            document.getElementById('accountFigure')
          )
          ;(temp = [
            {
              value: this.accountStatisticData.accountOpenedPercent,
              name: '专户开设比例',
            },
            {
              value: 100 - this.accountStatisticData.accountOpenedPercent,
              name: '未专户开设比例',
            },
          ]),
            (tempData = [
              {
                value: this.accountStatisticData.accountFullPaidPercent,
                name: '足额拨付比例',
              },
              {
                value: 100 - this.accountStatisticData.accountFullPaidPercent,
                name: '未足额拨付比例',
              },
            ])
        }

        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}:{d}%',
          },
          series: [
            {
              name: tipName,
              type: 'pie',
              selectedMode: 'single',
              radius: ['30%', '20%'],
              //   radius: ['40%', '55%'],
              label: {
                position: 'inner',
                show: false,
              },
              labelLine: {
                show: false,
              },
              data: temp,
              color: ['#26BBFF', '#1C405B'],
              center: ['50%', '35%'],
            },
            {
              name: tipName,
              type: 'pie',
              radius: ['40%', '55%'],
              color: ['#3F7EEF', '#1C405B'],
              label: {
                position: 'inner',
                show: false,
              },
              center: ['50%', '35%'],

              data: tempData,
            },
          ],
        }
        if (id == 'realName') {
          this.chartRealName.setOption(option)
          window.addEventListener('resize', () => {
            this.chartRealName.resize()
          })
        } else if (id == 'accountFigure') {
          this.chartAccount.setOption(option)
          window.addEventListener('resize', () => {
            this.chartAccount.resize()
          })
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.contentTop {
  height: calc(25% - 10px);
  margin-top: 10px;
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
    }
  }
}
.commonHeightTop {
  height: calc(100%);
}
.contentBg {
  background: rgba(29, 65, 96, 0.5);
}
.fontColor {
  color: #fff;
}
.comFontSize {
  font-size: 16px;
}
.comSinFontSize {
  font-size: 14px;
}
.sinFontColor {
  color: #7193b2;
}
.numColor {
  color: #53ffac;
}
.maxNum {
  font-size: 20px;
}
.TitleStyle {
  padding: 2.5% 0;
  //    padding-left: 10px;
  &::before {
    content: '';
    background: #265faa;
    display: inline-block;
    width: 3px;
    height: 16px;
    margin-right: 8px;
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
}
.contentBoxTop {
  height: 90% !important;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  .markStyle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
  }
  P {
    position: relative;
    top: 0;
    margin-bottom: 22px;
  }
  .contentBox {
    text-align: center;
  }
  .markTitle {
    margin-left: 10px;
  }
}
.projectDataBox {
  padding-right: 20px;
  text-align: right;
}
.projectDataTitBox {
  padding-left: 20px;
}
.markBg {
  background: #3f7eef;
}
.markBgO {
  background: #26bbff;
}
.markBgT {
  background: #52ffac;
}
.projectFigure {
  height: calc(100%);
  .statistic {
    position: relative;
    height: calc(100%);
  }
  .staSty {
    top: -45px;
  }
}
.RealNameBox {
  width: 136px;
  margin-left: 21px;
  background: #1c405b;
  padding: 8px 11px;
}
.realNameProportion {
  margin-left: 21px;
  position: relative;
  margin-top: 8px;
}
.mLTen {
  margin-left: 10px;
}
.titleTip {
  color: #7a8b9b;
}
@media all and (min-height: 700px) and (max-height: 800px) {
  .TitleStyle {
    padding: 10px 0 !important;
  }
  .comFontSize {
    font-size: 12px !important;
  }
  .TitleStyle {
    &::before {
      height: 10px !important;
    }
  }
  .contentBoxTop {
    p {
      margin-bottom: 16px !important;
    }
  }
  .maxNum {
    font-size: 14px !important;
  }
  .realNameProportion {
    margin-top: 0 !important;
  }
  .comSinFontSize {
    font-size: 12px !important;
  }
}
@media screen and (max-width: 1366px) and (max-height: 768px) {
  .TitleStyle {
    padding: 5px 0 !important;
  }
  .comFontSize {
    font-size: 12px !important;
  }
  .TitleStyle {
    &::before {
      height: 10px !important;
    }
  }
  .contentBoxTop {
    p {
      margin-bottom: 1% !important;
    }
  }
  .maxNum {
    font-size: 14px !important;
  }
  .realNameProportion {
    margin-top: 0 !important;
  }
  .comSinFontSize {
    font-size: 12px !important;
  }
  .RealNameBox {
    padding: 0px 11px !important;
  }
  .staSty {
    top: -40px !important;
  }
}
</style>
